<template>
	<view class="add_outside">
		<xbd-pages-content title="室外下单">
			<template #content>
				<view class="content" :style="'minHeight:'+windowHeight+'px'">
					<view class="top">
						<view class="tab">
							<view :class="['tabs', tabs==='1' ? 'active' : '']" @click="changeTab('1')">
								待派车
							</view>
							<view :class="['tabs', tabs==='2' ? 'active' : '']" @click="changeTab('2')">
								待入车
							</view>
							<view :class="['tabs', tabs==='3' ? 'active' : '']" @click="changeTab('3')">
								配送中
							</view>
							<view :class="['tabs', tabs==='4' ? 'active' : '']" @click="changeTab('4')">
								已完成
							</view>
						</view>
					</view>
					<view class="body">
						<view class="bg_top">
							-
						</view>
						<uni-list :border="false">
							<view class="">
								<xbd-order-details-card v-for="item in showList" :key="item.order_id" :myInfo="item"
									@clickOrderCard='clickOrderCard(item.order_id,item.status,item.route_name)'
									:type='type'></xbd-order-details-card>
							</view>
							<xbd-null-list v-if="!showList.length"></xbd-null-list>
							<xbd-loading-more :status-num="statusNum" :is-load-more="isLoadMore"></xbd-loading-more>
						</uni-list>
					</view>
					<view class="foot">
						<view class="tab_one" v-if="tabs === '1'">
							<view class="">
								<checkbox value="cb" color="#F59F54 " :checked="allChoose" @change="ckeckAll"
									style="border-color:#F59F54 ; border-radius: 50%;" />
							</view>
							<view class="date">
								全选
							</view>
							<view class="button" @click="route">
								规划动态路线
							</view>
						</view>
						<view class="tab_two" v-else-if="tabs === '2'" @click="createTask">
							<view class="button" @click="CreateTask">
								创建任务
							</view>
						</view>
					</view>
				</view>

			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		DeliveryOrder
	} from '@/api/index.js';
	export default {
		data() {
			return {
				allChoose: false,
				visible: false,
				creat_id: [],
				tabs: '1',
				statusNum: 0,
				isLoadMore: false,
				type: 'one',
				showList: [],
				qurInfo: {
					order_status: 0,
					page: 0,
					perpage: 100

				},
				routeInfo: {
					page: 0,
					perpage: 4
				},
				windowHeight: 0,
			};
		},
		methods: {
			//规划动态路线按钮

			route() {

				if (this.creat_id.length === 0) {
					this.$showToast('请选择需规划线路的订单！');
				} else {
					uni.setStorageSync('routeChoose', this.creat_id)
					uni.navigateTo({
						url: './dynamicRoute',
					})
				}

			},
			changeTab(num) {
				// tab切换 先关闭上一个上拉加载更多接口的请求
				clearTimeout(this?.timer);
				this.tabs = num;
				this.qurInfo.page = 0
				this.isLoadMore = false
				this.showList = []
				if (num === '1') {
					this.creat_id = []
					// this.allChoose =false
					this.type = 'one'
					this.qurInfo.order_status = 0
					this.qurInfo.perpage = 100
					this.init()
				} else if (num === '2') {
					this.creat_id = []
					this.type = 'two'
					this.routeInfo.page = 0
					this.routeList()
				} else if (num === '3') {
					this.type = 'three'
					this.qurInfo.order_status = 1
					this.qurInfo.perpage = 4
					this.init()
				} else if (num === '4') {
					this.type = 'four'
					this.qurInfo.order_status = 2
					this.qurInfo.perpage = 4
					this.init()
				}
			},

			clickOrderCard(id, sta, val) {
				if (this.tabs === '2') {
					if (sta) {
						uni.navigateTo({
							url: `./routeDetails?id=${id}&title=${val}`,
						})
					} else {
						uni.showToast({
							title: '请先创建任务！',
							icon: 'none',
						})
					}

				} else if (this.tabs === '1') {
					uni.navigateTo({
						url: `./details?msg=0&id=${id}`,
					})
				} else if (this.tabs === '3') {
					uni.navigateTo({
						url: `./details?msg=1&id=${id}`,
					})
				} else if (this.tabs === '4') {
					uni.navigateTo({
						url: `./details?msg=2&id=${id}`,
					})
				}

			},
			// 初始化
			async init() {
				try {
					this.$showLoading('加载中');
					const res = await DeliveryOrder.getOrderList(this.qurInfo);
					uni.hideLoading();
					this.showList = res.data.list
					if (this.tabs === '1') {
						this.showList.forEach(item => {
							item.choose = false;
						})
					}
					// 如果请求数据少于默认数量 则不显示loding模块 和不做下拉加载
					if (this.showList.length === this.qurInfo.perpage) {
						this.isLoadMore = true;
						this.statusNum = 2;
					}

				} catch (err) {
					uni.hideLoading();
				}
			},
			// 创建任务
			async CreateTask() {
				if (this.creat_id.length === 0) {
					return this.$showToast('请勾选需创建的任务！');
				}
				const o = {
					route_list: this.creat_id
				}
				try {
					this.$showLoading('创建任务');
					const res = await DeliveryOrder.postCreateTask(o);
					// 手动修改任务创建状态
					if (res.success) {
						this.showList.forEach(item => {
							if (this.creat_id.indexOf(item.order_id) !== -1) {
								item.status = true;
							}
						})
					}
					uni.hideLoading();
				} catch (err) {
					uni.hideLoading();
				}
			},
			// 全选按钮
			ckeckAll(e) {
				// 阻止点击事件穿透
				e.stopPropagation();
				if (e.detail.value) {

					this.creat_id = []
					this.allChoose = true
					this.showList.forEach(item => {
						this.creat_id.push(item.order_id);
						item.choose = true;
					})
				} else {
					this.creat_id = []
					this.allChoose = false
					this.showList.forEach(item => {
						item.choose = false;
					})
				}
			},


			ckeckCancelOrder(obj) {
				this.showList = this.showList.filter(item => {
					return item.order_id !== obj
				})
				// 避免选中 取消操作
				this.creat_id = this.creat_id.filter(item => item != obj);
			},

			// 复选按钮
			ckeckRouteTrue(obj) {
				this.creat_id.push(obj);
			},

			ckeckWaitTrue(obj) {
				this.creat_id.push(obj);
				this.showList.forEach(item => {
					if (item.order_id === obj) {
						item.choose = true;
					}
				})
			},
			ckeckRouteFalse(obj) {
				this.creat_id = this.creat_id.filter(item => item != obj);
			},
			ckeckWaitFalse(obj) {
				this.creat_id = this.creat_id.filter(item => item != obj);
				this.showList.forEach(item => {
					if (item.order_id === obj) {
						item.choose = false;
					}
				})
			},
			// 获取带入车数据
			async routeList() {
				try {
					this.$showLoading('加载中');
					const res = await DeliveryOrder.getRouteList(this.routeInfo);
					this.showList = res.data.list
					// // 如果请求数据少于默认数量 则不显示loding模块 和不做下拉加载
					if (this.showList.length === this.routeInfo.perpage) {
						this.isLoadMore = true;
						this.statusNum = 2;
					}
					uni.hideLoading();
				} catch (err) {
					uni.hideLoading();
				}
			},
			// 上拉加载
			loadmore() {
				if (!this.visible && this.type !== 'one') {
					this.qurInfo.page++;
					this.routeInfo.page++;
					this.statusNum = 1;
					this.isLoadMore = true;
					this.loadmoreList();
				}
			},
			// 加载更多
			async loadmoreList() {
				try {
					this.$showLoading('加载中');

					// 在定时器中执行请求方便 tab切换 关闭请求
					this.timer = setTimeout(async () => {

						if (this.type === 'two') {
							const res = await DeliveryOrder.getRouteList(this.routeInfo);
							if (res.success) {
								this.showList = this.showList.concat(res.data.list);
								if (res.data.list.length === this.routeInfo.perpage) {
									this.statusNum = 2;
								} else {
									this.statusNum = 0;
								}
							} else {
								this.routeInfo.page--;
								this.statusNum = 0;
							}
						} else {
							const res = await DeliveryOrder.getOrderList(this.qurInfo);

							if (res.success) {
								this.showList = this.showList.concat(res.data.list);
								if (res.data.list.length === this.qurInfo.perpage) {
									this.statusNum = 2;
								} else {
									this.statusNum = 0;
								}
							} else {
								this.qurInfo.page--;
								this.statusNum = 0;
							}
						}

					}, 0);
					uni.hideLoading();
				} catch (e) {
					uni.hideLoading();
					if (this.type === 'two') {
						this.routeInfo.page--;
					} else {
						this.queryInfo.page--;
					}
				}
			},
			// 带派车页面列表更新
			changeWaitList(val) {
				val.forEach(item1 => {
					this.showList = this.showList.filter(item => {
						return item.order_id !== item1
					})
				})
				this.creat_id = []
			},
			// 带入车页面列表更新
			changeInList(val) {
				this.showList = this.showList.filter(item => {
					return item.order_id !== val
				})
			},
			// 已完成页面列表更新
			successInList(val) {
				this.showList.forEach(item =>{
					if(item.order_id === val){
						item.complete_status= 1
					}
				})
			}
		},

		watch: {

			creat_id(newVal, oldVal) {
				if (newVal.length === this.showList.length && this.showList.length !== 0) {
					this.allChoose = true
				} else {
					this.allChoose = false
				}
			},
			showList(newVal, oldVal) {
			}
		},

		onLoad() {
			const {
				statusBarHeight
			} = uni.getSystemInfoSync();
			this.top = statusBarHeight + 44 + 'px';
			this.init()
			// 监听带派车取消列表更新
			uni.$on('CancelOrder', this.changeInList);
			// 监听配送中列表更新
			uni.$on('successChangeList', this.successInList);
			// 监听带入车列表更新
			uni.$on('successOut', this.changeInList);
			// 监听带派车列表更新
			uni.$on('successDynamic', this.changeWaitList);
			// 监听带入车线路选择
			uni.$on('ckeckRouteTrue', this.ckeckRouteTrue);
			uni.$on('ckeckRouteFalse', this.ckeckRouteFalse);
			// 监听待派车订单选择
			uni.$on('ckeckWaitTrue', this.ckeckWaitTrue);
			uni.$on('ckeckWaitFalse', this.ckeckWaitFalse);
		},
		onUnload() {
			// 卸载页面事件监听
			uni.$on('CancelOrder');
			uni.$on('successChangeList');
			uni.$on('successOut');
			uni.off('successDynamic');
			uni.$off('ckeckRouteTrue');
			uni.$off('ckeckRouteFalse');
			uni.$off('ckeckWaitTrue');
			uni.$off('ckeckWaitFalse');
		},
		onReachBottom() {
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list {
		background-color: #F8F8F8;
	}

	.content {
		position: relative;
		padding-bottom: 100rpx;

		.top {
			font-size: 28rpx;
			position: fixed;
			top: 0;
			padding: 40rpx 50rpx 0 50rpx;
			width: 750rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			z-index: 999;

			.tab {
				display: flex;
				justify-content: space-between;

				.tabs {
					padding-bottom: 40rpx;

					&.active {
						color: #457AFF;
						box-sizing: border-box;
						border-bottom: 2px solid #457AFF;
					}
				}
			}

		}

		.body {
			// box-sizing: border-box;
			padding: 20rpx 0 0 0;

			.bg_top {
				font-size: 28rpx;
				padding: 40rpx 50rpx;
				box-sizing: border-box;
				color: #f8f8f8;
			}
		}

		.foot {
			width: 750rpx;
			position: fixed;
			bottom: 0;
			background-color: #FFFFFF;
			padding: 0 40rpx;
			box-sizing: border-box;
			box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);

			.tab_one {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;

				.date {
					flex: 1;
					margin-left: 30rpx;
					font-size: 28rpx;
				}

				.button {
					width: 180rpx;
					height: 56rpx;
					line-height: 52rpx;
					text-align: center;
					box-sizing: border-box;
					border-radius: 8rpx;
					font-size: 24rpx;
					border: 2rpx solid #457AFF;
					color: #457AFF;
				}
			}

			.tab_two {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;

				.button {
					width: 320rpx;
					height: 56rpx;
					line-height: 52rpx;
					text-align: center;
					box-sizing: border-box;
					border-radius: 8rpx;
					font-size: 24rpx;
					border: 2rpx solid #457AFF;
					color: #457AFF;
				}
			}

		}
	}
</style>
